/**
 * Created by xmgong on 2017/10/24.
 * 提现申请
 */
import React from 'react';
import {connect} from 'react-redux';
import {
    Text,
    ScrollView,
    View,
    StyleSheet,
    Image,
    TextInput,
    InteractionManager,
    NativeModules,
    TouchableHighlight,
} from 'react-native';
import styles from './styles';
import themeconfig from '../../config/theme';
import {getBankAccountDetailAction, applyCrashAction} from './actions';
import {toast} from '../../utils/NativeUtil';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import {naviPush, naviBack} from '../../navigatorApp/actions';

class ApplyCrash extends React.Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="提现申请"/>,
    });

    constructor(props) {
        super(props);
        this.state = {
            carduri: require('../../image/img_bank_white.png'),
            accountid: '',
            accountname: '',
            applyMoney: '',
        };
    }

    componentDidMount() {
        this.props.getBankInfo(this.props.token);
    }


    editAccountClick() {
        let params = {};
        if (this.props.bankId.length > 0) {
            params.flag = 'edit';
        } else {
            params.flag = 'add';
        }
        this.props.naviPush("accountedit", params)
    }


    applyCrashAction = () => {
        if (this.state.applyMoney.length <= 0) {
            toast('申请金额不能为空');
            return;
        }

        if (this.props.bankId.length <= 0) {
            toast('请先添加银行卡');
            return;
        }

        const params = {
            token: this.props.token,
            applyMoney: this.state.applyMoney * 100,
            recordAccountId: this.props.recordAccountId
        };
        let self = this;
        this.props.applyCrash(params, function () {
            toast("申请成功，将在2日内到账");
            self.props.naviBack();
        });
    };

    render = () => {

        let cardname = "";
        if (this.props.bankName.length > 0) {
            cardname = this.props.bankName;
        } else {
            cardname = "点击添加账号";
        }

        return (
            <ScrollView style={{flex: 1, backgroundColor: '#ebebeb'}}>

                <TouchableHighlight
                    onPress={() => this.editAccountClick()}
                    underlayColor='rgba(255,255,255,0)'>
                    <View style={styles.cardbg}>
                        <Image source={this.state.carduri} style={styles.cardimg}></Image>
                        <View style={styles.cardinfo}>
                            <Text style={styles.cardinfotxt}>{this.props.bankId}</Text>
                            <Text style={styles.cardinfotxt}>{cardname}</Text>
                        </View>
                        <Image source={require('../../image/img_right_white.png')}
                               style={{width: 20, height: 20}}></Image>
                    </View>
                </TouchableHighlight>

                <View style={styles.itembar}>
                    <Text style={styles.itembar_txt}>可提现金额</Text>
                    <Text style={[styles.themegreen_color]}>{this.props.activeAmount}</Text>
                </View>
                <View style={styles.line_gray}/>
                <View style={styles.itembar}>
                    <Text style={styles.itembar_txt}>提现金额</Text>
                    <TextInput
                        style={{
                            flex: 1,
                            alignItems: 'flex-end',
                            justifyContent: 'flex-end',
                            paddingLeft: 10,
                            width: 40,
                            color: themeconfig.maincolor
                        }}
                        placeholder="输入提现金额,单位元"
                        textAlign='right'
                        keyboardType='numeric'
                        placeholderTextColor={themeconfig.maincolor}
                        writingDirection='rtl'
                        underlineColorAndroid={'transparent'}
                        onChangeText={(text) => this.setState({
                            applyMoney: text,
                        })}
                        returnKeyType='done'
                        multiline={false}
                    />
                </View>
                <TouchableHighlight
                    onPress={() => this.applyCrashAction()}
                    underlayColor='rgba(255,255,255,0)'>
                    <View style={[styles.greenbtn, {marginTop: 15}]}>
                        <Text style={styles.greenbtn_txt}>立即提现</Text>
                    </View>
                </TouchableHighlight>
            </ScrollView>);
    }
}

const mapStateToProps = state => ({
    token: state.mainmodel.token,
    activeAmount: (state.income.activeAmount / 100).toFixed(2),
    bankId: state.income.bankId,
    bankName: state.income.bankName,
    recordAccountId: state.income.recordAccountId
});

const mapDispatchToProps = (dispatch) => {
    return {
        getBankInfo: (token) => {
            dispatch(getBankAccountDetailAction(token));
        },

        applyCrash: (params, success) => {
            dispatch(applyCrashAction(params, success));
        },
        naviPush: (routeName, params) => {
            dispatch(naviPush(routeName, params))
        },
        naviBack: (routeName) => {
            dispatch(naviBack(routeName))
        }
    }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ApplyCrash);